<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 标题 -->
      <p class="title">推荐歌单</p>
      <!-- 歌单内容 -->
      <van-row gutter="10">
        <van-col span="8" v-for="obj in recommendList" :key="obj.id">
          <van-image width="100%" height="3rem" :src="obj.picUrl" />
          <p class="song_name">{{ obj.name }}</p>
        </van-col>
      </van-row>
 
      <!-- 标题 -->
      <p class="title">最新音乐</p>
      <MyCell :List="newMusicList" :hasSong="true"></MyCell>
    </van-pull-refresh>
  </div>
</template>

<script>
import { recommendMusicApi, newMusicApi } from "@/api/index";
import MyCell from "@/components/MyCell.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 推荐歌单列表
      recommendList: [],
      // 最新音乐列表
      newMusicList: [],
      isLoading: false,
    };
  },
  async created() {
    this.sendRecommendList();
    // 发送"最新音乐"的请求
    const resp1 = await newMusicApi({ limit: 7 });
    this.newMusicList = resp1.data.result;
  },
  methods: {
    async sendRecommendList() {
      // 发送推荐歌单的请求
      const resp = await recommendMusicApi({ limit: 6 });
      this.recommendList = resp.data.result;
      this.isLoading = false; // 表示加载完成
    },
    onRefresh() {
      setTimeout(() => {
        this.sendRecommendList();
        Toast("刷新成功");
      }, 800);
    },
  },
  components: { MyCell },
};
</script>

<style scoped>
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
  margin-bottom: 0.26667rem;
  word-break: break-all;
  /* 允许单词换行 */
  text-overflow: ellipsis;
  /* 内容溢出时显示... */
  display: -webkit-box;
  /* 对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2;
  /* 设置文字显示的行数 */
  overflow: hidden;
  /* 隐藏超出的部分 */
}
.search-icon {
  font-size: 24px;
}
</style>